<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>亿人宝 - 积分商品详细</title>
    <meta content="" name="keywords"/>
    <meta content="" name="description"/>
    <link rel="stylesheet" th:href="@{/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}" type="text/css">
    <script th:src="@{/script/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/axios.min.js}" type="text/javascript"></script>
    <script th:src="@{/layui/layer/layer.js}" type="text/javascript"></script>
</head>
<style type="text/css">
    .detailContainer {
        min-height: 620px;
        background: white;
    }

    .prd-box {
        padding: 70px 50px 30px;
        width: 1070px;
    }

    .section {
        width: 1170px;
        margin: 0 auto;
    }

    .g-cf, .g-o {
        zoom: 1;
        text-align: left;
    }

    .prd-box .prd-photo {
        position: relative;
        float: left;
        width: 400px;
        text-align: center;
    }

    .prd-box .prd-photo img {
        max-width: 100%;
    }

    .prd-box .prd-trade {
        width: 420px;
        float: left;
        margin-left: 180px;
    }

    .prd-box .prd-trade h1 {
        font-size: 28px;
        color: #333;
    }

    .prd-box .prd-trade p.prd-price {
        height: 66px;
        line-height: 66px;
        font-size: 20px;
        color: #fd7500;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        margin: 20px 0;
    }

    .prd-box .prd-trade p {
        font-size: 16px;
        color: #666;
        height: 36px;
        line-height: 36px;
    }

    .prd-box .prd-trade p.height-auto {
        height: auto;
    }

    .prd-box .prd-trade .opt-box {
        height: 50px;
        margin: 10px 0;
    }

    .g-fl {
        float: left;
    }

    .prd-box .prd-trade .opt-box .opt-btn {
        width: 36px;
        height: 38px;
        border: 1px solid #e0e0e0;
        display: inline-block;
        text-align: center;
        color: #666;
        font-size: 24px;
        text-decoration: none;
        float: left;
    }

    .prd-box .prd-trade .opt-box .count {
        width: 40px;
        height: 38px;
        border: none;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        float: left;
        text-align: center;
        font-size: 16px;
        color: #666;
        background: 0 0;
    }

    .prd-box .prd-trade .buynow {
        width: 160px;
        height: 40px;
        font-size: 16px;
        color: #fff;
        background-color: #fd7500;
        border-radius: 3px;
        cursor: pointer;
        border: none;
        margin-top: 30px;
        font-weight: 700;
        outline: 0;
        font-family: inherit;
    }
</style>
<body>
<div id="app">
    <div th:replace="common/public::head"></div>
    <div class="detailContainer" id="detailContainer">
        <div class="prd-box g-cf section">
            <div class="prd-photo"><img
                    :src="goods.img | urlFilter"
                    border="0"
                    height="400"
                    width="400"></div>
            <div class="prd-trade">
                <input name="gid" th:value="${gid}" type="hidden">
                <h1 v-text="goods.name"></h1>
                <p class="prd-price" v-text="'所需积分：'+price"></p>
                <p v-text="'可用积分：'+integral"></p>
                <p v-text="'库存：'+ goods.stock"></p>
                <p class="height-auto" v-text="goods.detail"></p>
                <p>限兑：每人每天限兑{{goods.limitExchange}}件</p>
                <p class="opt-box"><span class="g-fl">选择数量：</span>
                    <a @click="changeCount('cut')" class="js_minus opt-btn" href="javascript:" name="minus">-</a>
                    <input class="count" readonly type="text" v-model="count">
                    <a @click="changeCount('add')" class="js_plus opt-btn" href="javascript:" name="plus">+</a>
                </p>
                <input @click="submit" class="buynow" type="button" value="兑换">
            </div>
        </div>
    </div>

    <!--网站底部-->
    <div th:replace="common/public::footer"></div>
</div>
<script type="text/javascript">
    const baseUrl = '[[@{/base/}]]';
    const gid = $('input[name=gid]').val();
    let v = new Vue({
        el: '#app',
        data: {
            goods: {},
            count: 1,
            price: 0,
            userTodayExchange: 0,
            integral: 120
        },
        filters: {
            urlFilter: function (val) {
                return '[[@{/}]]' + val;
            }
        },
        watch: {
            count: function (val) {
                this.price = val * this.goods.price;
            }
        },
        methods: {
            //加载商品详情
            loadGoods: function () {
                axios.get(baseUrl + 'mallGoods/detail/' + gid)
                    .then(response => {
                        console.log(response);
                        this.goods = response.data.obj;
                        this.price = this.goods.price;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            loadTodayExchange: function () {
                axios.get(baseUrl + 'mallGoods/todayExchange', {
                    params: {
                        gid: gid
                    }
                })
                    .then(response => {
                        console.log(response);
                        this.userTodayExchange = response.data.obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            loadUserIntegral: function () {
                axios.get(baseUrl + 'mallGoods/userIntegral')
                    .then(response => {
                        console.log(response);
                        this.integral = response.data.obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            changeCount: function (action) {
                if ('cut' == action) {
                    if (this.count <= 1) return;
                    this.count--
                } else {
                    if (this.count == this.goods.stock) return;
                    if (this.count >= this.goods.limitExchange) return;
                    this.count++
                }
            },
            submit: function () {
                if (!this.goods.state) {
                    layer.msg('该商品未上架！', {
                        icon: 5
                    });
                    return;
                }
                if (this.count > this.goods.stock) {
                    layer.msg('库存不足！', {
                        icon: 5
                    });
                    return;
                }
                if (this.integral < this.goods.price * this.count) {
                    layer.msg('可用积分不足！', {
                        icon: 5
                    });
                    return;
                }
                if (this.userTodayExchange >= this.goods.limitExchange) {
                    layer.msg('您今天已经兑换过啦！', {
                        icon: 6
                    });
                    return;
                }
                layer.confirm('确认兑换吗？', function () {
                    let load = layer.load();
                    axios.post(baseUrl + 'mallGoods/addRecord', {
                        count: v.count,
                        gid: v.goods.id
                    })
                        .then(response => {
                            layer.close(load);
                            v.loadGoods();
                            v.loadTodayExchange();
                            v.loadUserIntegral();
                            layer.msg('兑换成功', {
                                icon: 1
                            })
                        })
                        .catch(error => console.log(error));
                })
            }
        },
        mounted() {
            this.loadGoods();
            this.loadTodayExchange();
            this.loadUserIntegral();
        }
    });
</script>
</body>
</html>
